<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <style>
        .site-border-default fieldset {
            border-top: 1px solid #eee;
        }

        .site-border-red fieldset {
            border-top: 1px solid #FF5722;
        }

        .site-border-orange fieldset {
            border-top: 1px solid #FFB800;
        }

        .site-border-green fieldset {
            border-top: 1px solid #009688;
        }

        .site-border-cyan fieldset {
            border-top: 1px solid #2F4056;
        }

        .site-border-blue fieldset {
            border-top: 1px solid #1E9FFF;
        }

        .site-border-black fieldset {
            border-top: 1px solid #393D49;
        }
        .bggroudff{
            background-color:#fafafa;
        }
    </style>
</head>
<body>
<div class="layui-tab-item layui-show">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6" style="width: 100%">
            <div class="layui-panel">
                <div style="padding: 30px;width: 100%">
                    <div class="layui-form-item" style="margin: auto">
                        <label class="layui-form-label" style="width: 20%">输入供货商名称或编号</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" required lay-verify="required" autocomplete="off"
                                   class="layui-input input1" style="width: 30%;float: left;margin-right: 20px">
                            <form class="layui-form" action="" style="float: left;">
                                <div class="layui-form-item">
                                    <div class="layui-input-inline" style="width: 10%">
                                        <button type="button" class="layui-btn" id="demo2">查询</button>
                                    </div>
                                </div>
                            </form>
                            <button type="button" onclick="selectRole_02()" class="layui-btn">供货商管理</button>
                            <button type="button" onclick="selectRole_03()" class="layui-btn">供货商账号</button>
                            <button type="button" class="layui-btn">退出</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="layui-tab-item layui-show">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6" style="width: 100%">
            <div class="layui-panel">
                <div style="height:100%;width: 100%" >
                    <div class="site-border-green">
                        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                            <legend>供货商信息:</legend>
                        </fieldset>
                        <form class="layui-form" action="" lay-filter="fromghs" id="fromghs"style="margin-bottom: 40px">
                            <div class="layui-inline">
                                <label class="layui-form-label">供货商名称:</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="supName" autocomplete="off" class="layui-input" readonly="readonly" style="border: 0px;width: 80px">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">联系人:</label>
                                <div class="layui-input-inline">
                                    <input type="tel" name="supPeople"  autocomplete="off" class="layui-input" readonly="readonly" style="border: 0px;width: 100px">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">联系电话:</label>
                                <div class="layui-input-inline">
                                    <input type="tel" name="supPhone" autocomplete="off" class="layui-input" readonly="readonly" style="border: 0px;width: 120px">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">我方应付:</label>
                                <div class="layui-input-inline">
                                    <input type="tel" name="purStoPayable" autocomplete="off" class="layui-input" readonly="readonly" style="border: 0px;width: 80px">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">我方实付:</label>
                                <div class="layui-input-inline">
                                    <input type="tel" name="purStoOutof" autocomplete="off" class="layui-input" readonly="readonly" style="border: 0px;width: 80px">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">相差金额:</label>
                                <div class="layui-input-inline">
                                    <input type="tel" name="differ" autocomplete="off" class="layui-input" readonly="readonly" style="border: 0px;width: 80px   ">
                                </div>
                            </div>
                        </form >
                        <!--</fieldset>-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="layui-tab layui-tab-card">
    <ul class="layui-tab-title">
        <li class="layui-this">供货商进货情况</li>
        <li>备注/联系记录</li>
        <li>合同管理</li>
    </ul>
    <div class="layui-tab-content" style="height: 200px">
        <div class="layui-tab-item layui-show">
            <div class="layuimini-container" style="width: 49%;float: left;margin-left: 5px">
                <div class="layuimini-main">
                    <div>
                        <table id="form-table_1" lay-filter="form-table_1"></table>
                    </div>
                </div>
            </div>
            <div class="layuimini-container" style="width: 49.5%;float: left;margin-left: 5px">
                <div class="layuimini-main">
                    <div>
                        <table id="form-table_2" lay-filter="test"></table>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-tab-item">
            <div style="width: 49.5%;float: left">
                <legend class="layui-font-black" style="margin-left: 20px;margin-bottom: 10px;">备注</legend>
                <textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea"
                          style="margin-left: 10px;width: 95%"></textarea>
                <button type="button" class="layui-btn"
                        style="margin:10px 330px;width: 80px;height: 30px;line-height: 10px">保存
                </button>
            </div>
            <div style="width: 49%;float: left">
                <legend class="layui-font-black" style="margin-left: 20px;margin-bottom: 10px;">联系记录</legend>
                <div class="layuimini-container" style="margin-left: 5px">
                    <div class="layuimini-main">
                        <div>
                            <table id="form-table_3" lay-filter="form-table_3"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-tab-item">
            <legend class="layui-font-black" style="margin-left: 20px;margin-bottom: 10px;">合同管理</legend>
        </div>
    </div>
</div>

</div>
<!--<div class="layuimini-container-01" style="display: none">-->
    <!--<div class="layuimini-main">-->
        <!--<div>-->
            <!--<table id="form-table-1" lay-filter="form-table-1"></table>-->
        <!--</div>-->
    <!--</div>-->
<!--</div>-->
<div class="layuimini-container-02" id="content" style="display: none">
    <form class="layui-form" lay-filter="user" id="user">
        <button type="button" class="layui-btn" style="margin-left: 70px" onclick="insertform()">添加</button>
        <button type="button" class="layui-btn" id="del">删除</button>
        <button type="button" class="layui-btn">修改</button>
        <button type="button" class="layui-btn">查询</button>
        <div class="layui-form-item" style="margin-top: 20px">
            <label class="layui-form-label" style="width: 34%">请输入供货商相关的信息进行查询:</label>
            <div class="layui-input-block">
                <input type="text" name="userName" autocomplete="off" class="layui-input"
                       style="width: 300px;float: left;margin-right: 20px"/>
                <button type="button" id="btn" class="layui-btn button1">查询</button>
            </div>
        </div>
        <div>
            <table id="form-table-2" lay-filter="form-table-2"></table>
        </div>
    </form>
</div>
<div class="layuimini-container-03" style="display: none">
    <div class="layui-form" style="float: left">
        <div class="layui-form-item" style="margin-top: 20px">
            <label class="layui-form-label">查询日期</label>
            <div class="layui-inline">
                <input type="text" class="layui-input test-item" placeholder="开始日期">
            </div>
            <div class="layui-inline">
                <input type="text" class="layui-input test-item" placeholder="结束日期">
            </div>
        </div>
    </div>
    <button type="button" class="layui-btn layui-btn-primary layui-border-green"
            style="width: 100px;height: 40px;margin-top: 20px">查询
    </button>
    <hr>
    <div class="layuimini-main">
        <div>
            <table id="form-table-3" lay-filter="test"></table>
        </div>
    </div>
</div>
<form class="layui-form" action="" lay-filter="form-insert" id="form-insert"style="margin-bottom: 40px;display: none">
    <div class="layui-inline" style="margin: 20px">
        <label class="layui-form-label">供货商名称:</label>
        <div class="layui-input-inline">
            <input type="tel" name="supName" id="supName" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline"style="margin: 20px">
        <label class="layui-form-label">联系人:</label>
        <div class="layui-input-inline">
            <input type="tel" name="supPeople" id="supPeople"  autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline"style="margin: 20px">
        <label class="layui-form-label">联系电话:</label>
        <div class="layui-input-inline">
            <input type="tel" name="supPhone" id="supPhone" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline"style="margin: 20px">
        <label class="layui-form-label">联系地址:</label>
        <div class="layui-input-inline">
            <input type="tel" name="supAddress" id="supAddress" autocomplete="off" class="layui-input">
        </div>
    </div>
</form>
<form class="layui-form" action="" lay-filter="form-updata" id="form-updata"style="margin-bottom: 40px;display: none">
    <div class="layui-inline" style="margin: 20px">
        <label class="layui-form-label">供货商名称:</label>
        <div class="layui-input-inline">
            <input type="tel" name="supName" id="supName_1" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline"style="margin: 20px">
        <label class="layui-form-label">联系人:</label>
        <div class="layui-input-inline">
            <input type="tel" name="supPeople" id="supPeople_1"  autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline"style="margin: 20px">
        <label class="layui-form-label">联系电话:</label>
        <div class="layui-input-inline">
            <input type="tel" name="supPhone" id="supPhone_1" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline"style="margin: 20px">
        <label class="layui-form-label">联系地址:</label>
        <div class="layui-input-inline">
            <input type="tel" name="supAddress" id="supAddress_1" autocomplete="off" class="layui-input">
        </div>
    </div>
</form>
</body>
<script src="../../js/jquery-3.6.0.min.js"></script>
<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['table', 'form', 'tableSelect'], function () {
        var table = layui.table,
            form = layui.form;
        table.render({
            elem: '#form-table_1',
            url: '/purchase?supid=s',
            cols: [[
                {field: 'purStoId', title: '单据号'},
                {field: 'depotName', title: '仓库名称'},
                {field: 'purStoPayable', title: '应付金额'},
                {field: 'purStoOutof', title: '实付金额'},
                {field: 'empName', title: '经办人'}
            ]]
        });
        table.on('row(form-table_1)',function (obj) {
            table.reload('form-table_2',{
                where:{
                    purStoId:obj.data.purStoId
                }
            })
        });
        table.render({
            elem: '#form-table_2',
            url: '/detailed',
            cols: [[
                {field: 'proId', title: '商品编号'},
                {field: 'proName', title: '商品名称'},
                {field: 'purStoDescComment', title: '单位'},
                {field: 'purStoDescPrice', title: '单价'},
                {field: 'purStoDescNum', title: '数量'},
                {field: 'amount', title: '总金额'}
            ]]
        });
        table.render({
            elem: '#form-table_3',
            url: '/supplier',
            page: true,
            cols: [[
                {field: 'supId', title: 'id',hide:true},
                {field: 'supName', title: '供货商名称', width: "125px"},
                {field: 'supPeople', title: '联系人', width: "125px"},
                {field: 'supPhone', title: '联系电话', width: "125px"},
                {field: 'contacts', title: '我方应付金额', width: "125px"},
                {field: 'supAddress', title: '联系地址', width: "125px"},
                {field: 'contacts', title: '供货商类型', width: "125px"},
                {field: 'contacts', title: '所属地', width: "125px"},
                {field: 'contacts', title: '默认供货商', width: "125px"}
            ]]
        });
        table.render({
            elem: '#form-table-1',
            url: '/supplier',
            page: true,
            cols: [[
                {field: 'supId', title: 'id',hide:true},
                {field: 'supName', title: '供货商名称', width: "12.5%"},
                {field: 'supPeople', title: '联系人', width: "12.5%"},
                {field: 'supPhone', title: '联系电话', width: "12.5%"},
                {field: 'contacts', title: '我方应付金额', width: "12.5%"},
                {field: 'supAddress', title: '联系地址', width: "12.5%"},
                {field: 'contacts', title: '供货商类型', width: "12.5%"},
                {field: 'contacts', title: '所属地', width: "12.5%"},
                {field: 'contacts', title: '默认供货商', width: "12.5%"}
            ]]
        });
        table.render({
            elem: '#form-table-2',
            url: '/supplier',
            page: true,
            cols: [[
                {field: 'supId', title: 'id',hide:true},
                {field: 'supName', title: '供货商名称', width: "12.5%"},
                {field: 'supPeople', title: '联系人', width: "12.5%"},
                {field: 'supPhone', title: '联系电话', width: "12.5%"},
                {field: 'contacts', title: '我方应付金额', width: "12.5%"},
                {field: 'supAddress', title: '联系地址', width: "12.5%"},
                {field: 'contacts', title: '供货商类型', width: "12.5%"},
                {field: 'contacts', title: '所属地', width: "12.5%"},
                {field: 'contacts', title: '默认供货商', width: "12.5%"}
            ]]
        });
        table.on('row(form-table-2)',function (obj) {
            obj.tr.addClass("bggroudff").siblings().removeClass("bggroudff");
            supId=obj.data.supId
        });
        $("#del").click(function () {
            layer.open({
                type:1,
                content:"是否删除编号为"+supId+"的所有信息",
                btn:["确定","取消"],
                yes:function () {
                    table.reload('form-table-2', {
                        url:"/delsupperlier",
                        where: {
                            supId:supId
                        }
                    })
                    layer.close(layer.index)
                }
            })
        })
        table.render({
            elem: '#form-table-3',
            url: '',
            cols: [[
                {field: 'supplieid', title: '联系时间'},
                {field: 'supplierName', title: '联系人'},
                {field: 'contacts', title: '经办人'}
            ]]
        });
        var form = layui.form, tableSelect = layui.tableSelect;
        tableSelect.render({
            elem: '#demo2',
            checkedKey: 'id',
            table: {
                url: '/supplier?supName=s',
                cols: [[
                    {type: 'radio'},
                    {field: 'supId', title: '编号'},
                    {field: 'supName', title: '供货商名称'},
                    {field: 'supPeople', title: '联系人'},
                    {field: 'supPhone', title: '联系电话'},
                    {field: 'supAddress', title: '联系地址'}
                ]],
                where: {supid: 1}
            },
            done: function (elem, data) {
                var NEWJSON = [];
                layui.each(data.data, function (index, item) {
                    NEWJSON.push(item.username);
                    var supid = item.supId;
                    table.reload('form-table_1', {
                        url: "/purchase?supid=" + supid
                    });
                    $.getJSON("/differ?supid="+supid,function (obj) {
						if(null != obj[0]){
							form.val('fromghs',{
							    "supName":obj[0].supName,
							    "supPeople":obj[0].supPeople,
							    "supPhone":obj[0].supPhone,
							    "purStoPayable":obj[0].purStoPayable,
							    "purStoOutof":obj[0].purStoOutof,
							    "differ":obj[0].differ
							})
						}
                       
                    })
                });
                elem.val(NEWJSON.join(","))
            }
        });
        $(".input1").keydown(function (event) {
            switch (event.keyCode) {
                case 13:
                    var supid = $(".input1").val();
                    // alert(supid)
                    table.reload('form-table_1', {
                        url: "/purchase?supid=" + supid
                    })
            }
        });

        $(document).on("click", ".layui-input-block>.button1", function () {
            var supName = $("input[name=userName]").val();
            table.reload('form-table-2', {
                url: "/supplier?supName=" + supName,
                where:{ }
            });
        })

        table.on('rowDouble(form-table-2)',function (obj) {
            layer.open({
                type:1,
                title:"修改供货商信息",
                content:$("#form-updata"),
                btn:["保存","取消"],
                success:function () {
                    $("#supName_1").val(obj.data.supName);
                    $("#supPeople_1").val(obj.data.supPeople);
                    $("#supPhone_1").val(obj.data.supPhone);
                    $("#supAddress_1").val(obj.data.supAddress);
                },
                yes:function () {
                    table.reload('form-table-2',{
                        url:"/updata",
                        where:{
                            supId:obj.data.supId,
                            supName:$("#supName_1").val(),
                            supPeople:$("#supPeople_1").val(),
                            supPhone:$("#supPhone_1").val(),
                            supAddress:$("#supAddress_1").val()
                        }
                    });
                    layer.close(layer.index)
                },
                end: function (res) {
                    $("#form-updata").css("display", "none")
                }
            })
        });

    });

    layui.use('element', function () {
        var element = layui.element;
        var layid = location.hash.replace(/^#test=/, '');
        element.tabChange('test', layid);
        element.on('tab(test)', function (elem) {
            location.hash = 'test=' + $(this).attr('lay-id');
        });
    });


    function selectRole_02() {
        layer.open({
            type: 1,
            title: "供货商管理",
            area: ['50%', '50%'],
            content: $("#content"),
            end: function (res) {
                $("#content").css("display", "none")
            }
        });
    }

    function selectRole_03() {
        layer.open({
            type: 2,
            title: false,
            area: ['95%', '95%'],
            content: "../sales/sell_CurrentAccounting.html",
            end: function (res) {
                $("#content").css("display", "none")
            }
        });
    }
    function insertform() {
        layui.use('form', function () {
            var table = layui.table,
                form = layui.form;
            layer.open({
                type: 1,
                title: "增加供货商",
                area: ['40%', '40%'],
                content: $("#form-insert"),
                btn: "保存",
                yes: function (obj) {
                    var supName=$("#supName").val();
                    var supPeople=$("#supPeople").val();
                    var supPhone=$("#supPhone").val();
                    var supAddress=$("#supAddress").val();
                    table.reload('form-table-2', {
                        url:"/insertsupper",
                        where: {
                            supName:supName,
                            supPeople:supPeople,
                            supPhone:supPhone,
                            supAddress:supAddress
                        }
                    })
                    layer.close(layer.index)
                },
                end: function (res) {
                    $("#form-insert").css("display", "none")
                }
            });
        })
    }


</script>
</html>
